<template>
	<!-- 首页/入口页面 -->
	<view class="constainer">
		<!-- 顶部搜索框 -->
		<view class="top-search" @click="toActivityList">
			<input disabled="true" class="top-input input-icon-left" v-model="searchValue" placeholder="搜索精彩活动"></input>
		</view>

		<!-- 顶部分类导航 -->
		<view class="top-category" v-show="page.current==0">
			<view class="category-box" v-for="(item,i) in navigation" :key='item.id' @click="navigationJumb(item.id)">
				<view class="category-box-icon">
					<image class="image" :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="category-box-text">
					{{item.title}}
				</view>
			</view>
		</view>

		<!-- 精选页面轮播图 -->
		<swiper v-show="page.current==0" class="inner-swiper" :indicator-dots="true" :autoplay="true" :circular="true"
			indicator-active-color="#fff" :interval="3000" :duration="1000">
			<swiper-item class="swiper-item-box" v-for="(item,index) in bannerImg" :key="item.id">
				<image class="banner-img" :src="imgUrl+item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 轮播图分类导航 -->
		<view class="nav">
			<!-- 大类 -->
			<view class="nav-item" :class="{'active':item.big_class_id==isActive}" v-for="(item,index) in navList"
				:key="item.big_class_id" @click="changePage(index)">
				<view class="nav-item-top">
					{{item.big_type}}
					<view class="hasSmallType" :class="{'hasSmallType-native':item.big_class_id==isActive}"
						v-if="navList[index].small.length>0 && item.big_class_id!=4 && item.big_class_id!=5 && item.flag==false ">

					</view>
				</view>
				<!-- 小类 -->
				<view class="nav-list"
					v-if="item.big_class_id!=0 && item.big_class_id!=4 &&item.big_class_id!=5 && item.flag==true && navList[index].small.length>0">
					<view class="nav-list-item"
						:class="{'checked':item.big_class_id==isActive && a.small_class_id==page.smallTypeID}"
						v-for="(a,b) in navList[index].small" :key="a.small_class_id"
						@click="searchByType(a.small_class_id)">
						{{a.big_type}}
					</view>
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper :style="'height:'+autoHeight+'rpx;'" @animationfinish="closeLoading()" @change="changeHandle"
			class="outer-swiper" :current="page.current" :indicator-dots="false" :circular="true" :autoplay="false">
			<!-- 轮播图每一项，即每一个导航页面 -->
			<swiper-item v-show="index==page.current" v-for="(navitem,index) in navList" :key="index">
				<!-- 无数据图片 -->
				<view v-if="!navList[index].currentList.data" class="noData-box">
					<image class="noData-img" src="/static/noData.jpeg" mode="aspectFill" @error="bannerError(index)">
					</image>
					<view class="noData-text">
						暂时没有数据哟~
					</view>
				</view>

				<!-- :throttle="false"这个是防止上拉加载到底再回退一点继续触发到底显示 -->
				<!-- <scroll-view :scroll-y="true" @scrolltolower="loadMore" class="swiper-item" :throttle="false" -->
				<u-loading-icon color="green" :show="isShowLoading"></u-loading-icon>
				<view @scrolltolower="loadMore" class="swiper-item">
					<!-- 活动列表具体内容 -->
					<view class="content" v-for="(item,i) in navList[index].currentList.data" :key="item.id"
						@click="toActivityDetail(item.id)">
						<!-- 活动列表左边图片 -->
						<view class="content-img">
							<image :src="item.images||'/static/images/noneImg.png'" @error="imageError(index,i)">
							</image>
							<view class="rank">已报名{{item.number+'/'+item.amount}}</view>
						</view>
						<!-- 活动列表右边内容 -->
						<view class="content-info">
							<view class="content-info-item name">
								{{item.name}}
							</view>
							<view class="content-info-item title">
								<uni-icons custom-prefix="iconfont" type="icon-geren" size="15"></uni-icons>
								<text>发布者:{{item.releaseName}}</text>
							</view>
							<view class="content-info-item title">
								<uni-icons custom-prefix="iconfont" type="icon-didian3" size="15"></uni-icons>
								{{item.location}}
							</view>
							<view class="content-info-item time">
								<uni-icons custom-prefix="iconfont" type="icon-shizhong" size="15"></uni-icons>
								{{dateFormat(item.startTime,item.endTime)}}
							</view>
							<view class="content-info-item price">
								<uni-icons custom-prefix="iconfont" type="icon-jiage" size="15"></uni-icons>
								{{item.price}}元/人
							</view>
							<view class="content-info-item time">
								<uni-icons custom-prefix="iconfont" type="icon-a-1" size="15"></uni-icons>
								报名截止:{{dateFormat1(item.deadlineTime)}}
							</view>
						</view>
					</view>
					<u-loading-icon color="green" :show="LoadingMore"></u-loading-icon>
					<u-loadmore
						v-if="navList[index].currentList.data&&navList[index].currentList.data.length==0||isToBottom"
						loadmoreText="没有更多了..." color="#1CD29B" lineColor="#1CD29B" dashed line />
					<!-- </scroll-view> -->
				</view>
			</swiper-item>


		</swiper>
	</view>
</template>

<script>
	import config from "@/config";
	import {
		getBannerList,
		getNavList,
		getActivityList
	} from "@/api/home/index.js";
	import mixin from "../../utils/mixin";
	export default {
		mixins: [mixin],
		data() {
			return {
				autoHeight: 0,
				// 页面切换数据加载动画
				isShowLoading: false,
				// 上拉加载动画
				LoadingMore: false,
				// 功能导航
				navigation: [{
					id: 0,
					title: "社团",
					image: "/static/images/home/社团.png"
				}, {
					// 	id: 1,
					// 	title: "积分商城",
					// 	image: "/static/images/home/积分.png"
					// }, {
					id: 2,
					title: "排行榜",
					image: "/static/images/home/排行.png"
				}, {
					id: 3,
					title: "考勤打卡",
					image: "/static/images/home/考勤.png"
				}, {
					id: 4,
					title: "投票工具",
					image: "/static/images/home/投票.png"
				}],
				// 解决下拉刷新触发loadMore改变页数问题
				isPullRefresh: false,
				//滑动区域重置（为解决页面数据多在下面多次显示加载的问题）
				scrollTop: 0,
				// 基本图片地址
				imgUrl: config.imgUrl,
				// 当前设备可用高度，减去头部和底部tabbar
				wh: 0,
				// 搜索框的值
				searchValue: "",
				// nav导航线显示
				isActive: 1,
				// 导航列表
				navList: [],
				// 轮播图
				bannerImg: [],
				// 活动列表(首次获取所有)
				activityList: [],
				// 是否到底了,false未到
				isToBottom: false,
				page: {
					// 当前页
					current: 0,
					// 页数
					pageNum: 1,
					// 条数
					pageSize: 10,
					// 大类
					bigTypeID: 1,
					// 小类
					smallTypeID: 0
				},
				// 活动id
				activityId: "",
				// 页面刷新
				isRefresh: false
			};
		},
		methods: {
			// 活动广场跳转
			navigationJumb(item) {
				switch (item) {
					case 0:
						this.$tab.navigateTo("/subPackages/MyClub/ClubDetail/RecommendedClubs/RecommendedClubs")
						break;
					case 1:
						break;
					case 2:
						this.$tab.navigateTo("/subPackages/TheCharts/TheCharts")
						break;
					case 3:
						this.$tab.navigateTo("/subPackages/activity/checking-in")
						break;
					case 4:
						this.$tab.navigateTo("/subPackages/voteUtil/index")
						break;
					default:
						this.$modal.msg("功能待开发");
						break;
				}
			},
			// 轮播图图片地址错误处理
			bannerError(index) {
				this.bannerImg[i] = "/static/images/noneImg.png";
			},
			// 服务器图片地址错误处理
			imageError(a, b) {
				this.navList[a].currentList.data[b].images = "/static/images/noneImg.png";
			},
			// 上拉加载更多
			loadMore(e) {
				// 判断是否下拉刷新，如是，直接return
				if (this.isPullRefresh) {
					return this.isPullRefresh = false
				}
				// console.log("加载更多");
				// 判断是否加载完毕
				if (this.page.pageNum * this.page.pageSize >= this.total) {
					return uni.showToast({
						title: "到底啦！",
						icon: "success",
						duration: 500,
					});
				} else {
					this.page.pageNum++;
					this.getActivityInfo(this.page);
				}
			},
			//跳转活动搜索页面
			toActivityList() {
				uni.navigateTo({
					url: "/subPackages/home/search",
				});
			},
			// 跳转活动详情页面
			toActivityDetail(activityId) {
				this.activityId = activityId;
				uni.navigateTo({
					url: "/subPackages/activity/detail?activityId=" +
						encodeURIComponent(JSON.stringify(this.activityId)),
				});
			},
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 2000
				});
			},
			// 轮播图切换结束关闭loading
			closeLoading() {
				this.isShowLoading = false
			},
			// 滑动轮播图触发
			changeHandle(e) {
				if (this.navList[this.page.current].flag == true) {
					this.navList[this.page.current].flag = false
				}
				this.toTop()
				// 导航底部标识
				this.isActive = e.detail.current + 1;
				// 轮播图索引切换
				this.page.current = e.detail.current;
				// 切换重置小类id
				this.page.smallTypeID = 0
				// 按大分类查询赋值
				this.page.bigTypeID = this.navList[e.detail.current].big_class_id
				// 重置页数
				this.page.pageNum = 1;

				// 解决切换轮播图其他页在下面多次加载的问题
				// this.scrollTop = this.scrollTop ? 0 : 1;

				// 切换数据后切换高度
				this.autoHeight = 350 * this.navList[e.detail.current].currentList.data.length
			},
			// 点击顶部nav导航触发
			changePage(currentIndex) {
				// 判断是否在当前页面点击，如果是并且flag为false则打开二级菜单，否则关闭
				if (this.page.current !== 0 && this.page.current == currentIndex && this.navList[currentIndex].flag ==
					false) {
					this.navList[currentIndex].flag = true
					// 处理数组赋值响应式问题，直接赋值不会被检测到（vue2监测问题）
					this.navList.splice(currentIndex, 1, this.navList[currentIndex])
				} else {
					this.navList[this.page.current].flag = false
					// 处理数组赋值响应式问题，直接赋值不会被检测到（vue2监测问题）
					this.navList.splice(currentIndex, 1, this.navList[currentIndex])
					this.page.current = currentIndex;
				}
			},
			// 通过小类查询
			searchByType(small_class_id) {
				// 按小分类查询赋值，大分类id
				this.page.bigTypeID = this.navList[this.page.current].big_class_id
				// 小分类id
				this.page.smallTypeID = small_class_id
				// 把当前页的数据清空
				this.navList[this.page.current].currentList = {
					Total: 0,
					data: []
				}
				// 重置页数
				this.page.pageNum = 1
				// 获取活动列表数据
				this.getActivityInfo(this.page);
			},
			// 获取活动列表数据
			getActivityInfo(page) {
				this.isShowLoading = true
				// 获取活动列表数据

				getActivityList(page).then(
					res => {
						if (res.data.data.length > 0) {
							// for循环处理图片路径问题
							for (let i = 0; i < res.data.data.length; i++) {
								res.data.data[i].images = this.imgUrl + res.data.data[i].images;
							}
							// 数据分页拼接
							let currentData = this.navList[this.page.current].currentList
							if (currentData.data.length > 0) {
								currentData.data = [
									...currentData.data,
									...res.data.data,
								];
								currentData.Total = res.data.Total
							} else {
								currentData = res.data
							}
							this.navList[this.page.current].currentList = currentData
							this.autoHeight = 350 * this.navList[this.page.current].currentList.data.length
						}
						this.isShowLoading = false
						this.LoadingMore = false
						uni.stopPullDownRefresh();
					},
					err => {
						this.$modal.msgError("接口异常");
						console.log("活动列表数据异常，请查看后台接口");
					}
				);
			},
			async test() {
				this.activityList = []
				for (let i = 0; i < 5; i++) {
					let res = await getActivityList(this.page)
					if (res.data.data && res.data.data.length > 0) {
						// for循环处理图片路径问题
						for (let j = 0; j < res.data.data.length; j++) {
							res.data.data[j].images = this.imgUrl + res.data.data[j].images;
						}
					}
					this.activityList.push(res.data)
					this.page.bigTypeID++;
					this.navList[i].currentList = this.activityList[i]
				}
				// 请求完所有数据后重置页面初始数据
				this.page = {
					// 当前页
					current: 0,
					// 页数
					pageNum: 1,
					// 条数
					pageSize: 10,
					// 大类
					bigTypeID: 1,
					// 小类
					smallTypeID: 0
				}
				this.autoHeight = 350 * this.navList[0].currentList.data.length
			},
			async getNav() {
				var that = this
				// 获取导航数据
				let res = await getNavList()
				if (res.data.length > 0) {
					that.navList = res.data
					// 给每个分类添加控制子分类显示的开关
					for (let i = 0; i < that.navList.length; i++) {
						that.navList[i].flag = false
						that.navList[i].currentList = []
					}
				}
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			//获取可用屏幕高度
			this.wh = systemInfo.screenHeight;
			this.systemInfo = systemInfo
			// 获取轮播图
			getBannerList().then(
				res => {
					this.bannerImg = res.data
				},
				err => {
					console.log("轮播图接口异常");
				}
			);
			this.getNav()
			setTimeout(() => {
				this.test()
			}, 500)
		},
		// 页面加载完成，只会调用一次
		onReady() {},
		onShow() {
			this.isShowLoadingPage = true
			this.isPullRefresh = true;
			if (this.isRefresh) {
				// 把当前页的数据清空
				this.navList[this.page.current].currentList = {
					Total: 0,
					data: []
				}
				// 重置页数
				this.page.pageNum = 1
				// 获取活动列表数据
				this.getActivityInfo(this.page);
			}
		},
		onHide() {
			this.isRefresh = true
		},
		onPullDownRefresh() {
			// 下拉刷新状态为true
			this.isPullRefresh = true;
			// 重置页面数据
			// 把当前页的数据清空
			this.navList[this.page.current].currentList = {
				Total: 0,
				data: []
			}
			// 重置页数
			this.page.pageNum = 1
			this.page.smallTypeID = 0
			// 获取活动列表数据
			this.getActivityInfo(this.page);
		},
		onReachBottom() {
			// 判断是否加载完毕
			if (this.page.pageNum * this.page.pageSize >= this.navList[this.page.current].currentList.Total) {
				// return uni.showToast({
				// 	title: "到底啦！",
				// 	icon: "success",
				// 	duration: 500,
				// });
				this.isToBottom = true
				return
			} else {
				this.LoadingMore = true
				this.page.pageNum++;
				this.getActivityInfo(this.page);
			}
		}
	};
</script>

<style lang="less">
	// 基础设置
	.constainer {
		margin: 0;
		padding: 0;
		font-family: "Arial";
		position: relative;
		// overflow: scroll;
	}

	// 顶部搜索框
	.top-search {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;

		.top-input {
			width: 720rpx;
			height: 54rpx;
			margin-left: 16rpx;
			border-radius: 80rpx;
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
		}

		.input-icon-left {
			// 图标切的是16*16像素的图
			background: url("/static/search.png") no-repeat;
			background-position: 14rpx;
			padding-left: 60rpx;
		}
	}

	//顶部分类导航
	.top-category {
		width: 720rpx;
		height: auto;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;

		.category-box {
			width: 130rpx;
			height: 140rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;

			.category-box-icon {
				.image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.category-box-text {}
		}
	}

	// 轮播图导航
	.nav {
		position: sticky;
		top: 0%;
		z-index: 99;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		background-color: #f1f1f1;
		font-size: 32rpx;
		font-family: "PingFangSC-regular";
		color: #979797;

		.nav-item {
			position: relative;

			.nav-item-top {
				position: relative;

				.hasSmallType {
					position: absolute;
					right: -28rpx;
					bottom: 0;
					/*宽高为0*/
					width: 0;
					height: 0;
					// 在三角形底边设置一个边界颜色
					// 其它3边设置相同颜色
					border-top: 14rpx solid #a3a3a3;
					border-bottom: 10rpx solid transparent;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
				}

				.hasSmallType-native {
					border-top: 14rpx solid #4fc125;
					border-bottom: 10rpx solid transparent;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
				}
			}

			// 顶部导航小类
			.nav-list {
				background-color: #fdfeff;
				position: absolute;
				display: flex;
				flex-direction: column;
				text-align: justify;
				text-align-last: justify;
				top: 70rpx;
				left: -30rpx;
				z-index: 99;
				border-radius: 20rpx;
				color: #717171;

				&::before {
					content: '';
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					top: -12rpx;
					left: 110rpx;
					background-color: #fff;
					transform: rotate(45deg);
					z-index: -1;
				}

				.nav-list-item {
					line-height: 60rpx;
					padding: 0 40rpx;
					border-bottom: 1px solid;
					width: 100%;

					.data-v-71e217db {
						vertical-align: middle;
					}

					&:last-child {
						border: 0;
					}
				}
			}

		}

		// 当前导航标识
		.active {
			font-size: 18px;
			color: #38ba09;
		}
	}

	// 轮播图
	.outer-swiper {
		width: 100%;
		min-height: 1200rpx;

		.swiper-item {
			height: 100%;
		}


	}

	// 精选轮播图
	.inner-swiper {
		margin-top: 10rpx;
		width: 720rpx;
		height: 400rpx;
		margin: 0 auto;

		.swiper-item-box {
			.banner-img {
				width: 100%;
			}
		}
	}


	// 无数据照片盒子
	.noData-box {
		width: 400rpx;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 25%;

		.noData-img {
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
		}

		.noData-text {
			margin-top: 20rpx;
		}
	}


	// 活动列表具体内容
	.content {
		background-color: white;
		width: 720rpx;
		height: 320rpx;
		display: flex;
		text-align: center;
		align-items: center;
		margin: 20rpx auto;
		border-radius: 14rpx;
		box-shadow: 0 0 10rpx #BBB;

		.content-img {
			position: relative;
			margin-left: 20rpx;
			height: 280rpx;
			box-shadow: 0rpx 0rpx 30rpx #949494;
			border-radius: 20rpx;


			image {
				width: 208rpx;
				height: 100%;
				border-radius: 20rpx;
			}

			.rank {
				display: block;
				position: absolute;
				left: 0;
				bottom: 0;
				font-size: 30rpx;
				font-family: "Arial";
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				color: #f7f7f9;
				border-radius: 10rpx;
				background-color: #60bf70;
				font-weight: 500;
				font-size: 16px;
			}
		}

		.content-info {
			width: 440rpx;
			height: 280rpx;
			display: flex;
			justify-content: space-evenly;
			position: relative;
			flex-direction: column;
			text-align: left;
			font-family: "PingFangSC-regular";
			font-size: 24rpx;
			margin-left: 24rpx;
			color: rgba(16, 16, 16, 0.6);

			// 文字超出省略号
			.content-info-item {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.name {
				font-size: 16px;
				color: black;
				font-weight: bold;
				opacity: 1;
			}

			.title {}

			.time {}

			.price {}

			.content-info-btn {
				display: block;
				width: 150rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #fff;
				background-color: #38ba09;
				text-align: center;
				margin-left: 320rpx;
				border-radius: 10rpx;
			}

		}
	}

	// 小类选中颜色
	.checked {
		background: #50c127;
		color: white;
	}
</style>
